<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" template="/templates/manageui.xhtml">

	<ui:define name="customStyle">
		<style type="text/css">
.testreg {
	vertical-align: top;
}

.setWidth {
	width: 155px;
}

.picturePreview {
	width: 210px;
	height: 200px;
	text-align: center;
	vertical-align: middle;
}

.uploadify-button {
	background-color: transparent;
	border: none;
	padding: 0;
}

.uploadify:hover .uploadify-button {
	background-color: transparent;
}
</style>
	</ui:define>
	<ui:define name="customJS">
		<script src="uploadify/jquery.uploadify.js" type="text/javascript"></script>
		<script type="text/javascript">
		$(document).ready(function(){
			$("#uploadify").uploadify({
					'fileSizeLimit': '1024KB',
		            'fileTypeDesc' : 'Image Files',
		            'fileTypeExts' : '*.gif; *.jpg; *.png',
		            'buttonImage' : 'uploadify/browse-btn.png',
					swf           : 'uploadify/uploadify.swf',
					width         : 71,
					uploader      : 'uploadservlet?key=<h:outputText value="#{registerBean.key}"/>&amp;param=original&amp;t=#{now.time}',
					'onQueueComplete' : function(queueData) {
 			            /* $(document.getElementById('signUpForm:hiddenLink')).click(); */
						$("#hiddenLink").click();
 		            },
		            'onDestroy' : function() {
		            }
			});
		}); 


		</script>


	</ui:define>
	<ui:define name="customCSS">
		<link rel="stylesheet" media="screen" href="uploadify/uploadify.css"
			type="text/css" />
	</ui:define>

	<ui:define name="content">



		<!-- <div id="dataPage"> -->
		<div class="entry" style="text-align: left;">
			<!-- <div class="entry"> -->

			<h:form id="signUpForm" prependId="false">
				<p:fieldset styleClass="fieldset" legend="Registration Form">
					<p:focus />
					<h:panelGrid columns="2" columnClasses=",testreg">
						<h:panelGrid id="regPanelGrid"
							style="text-align: left; margin: 25px 10px 40px;width:425px;border-right: 1px solid rgb(235, 235, 235);"
							cellspacing="8" columns="2" columnClasses="setWidth,">
							<input id="uploadify" type="file" />

							<!-- <p:graphicImage id="preview" style="width:55px;" alt=" "
									value="#{registerBean.image}" cache="false" /> -->
							<p:panel>
								<p:graphicImage id="preview" style="width:55px;" alt=" "
									value="#{registerBean.image}" cache="false">
									<f:param value="#{now.time}"></f:param>
								</p:graphicImage>

								<h:outputText value="#{registerBean.uploadFileName}" id="text" />
							</p:panel>

						</h:panelGrid>
						<h:panelGrid>
							<!-- will removed this comment later for upload picture -->
							<p:panel
								style="height:500px;width:450px;background:none;border: none;">
								<div style="text-align: center; margin-top: 20px;">
									<!-- two -->
									<h:outputText
										style="COLOR: #ff8040; FONT-FAMILY: 'Arial'; FONT-SIZE: large;"
										value=" Join Us , show your smile  " />
									<br />
									<p:spacer style="width:100% ;height:10px"></p:spacer>
									<h:outputText
										value="Upload your picture to let everyone on world know about you...  "
										style="FONT-SIZE: small; FONT-FAMILY: 'Arial';COLOR: #ff8040;" />
									<p:spacer style="width:100% ;height:10px"></p:spacer>
									<img width="300px" height="124px"
										src="#{request.contextPath}/images/profiles_2x.png"></img>
									<p:spacer style="width:100% ;height:30px"></p:spacer>
								</div>
							</p:panel>
						</h:panelGrid>
					</h:panelGrid>
					<h:panelGrid id="buttonGrid"
						style="text-align: right; margin: 0px 33% 0px" cellspacing="8"
						columns="3">


						<p:commandButton id="backToSignIn"
							action="register?faces-redirect=true" immediate="true"
							icon="ui-icon-arrowreturnthick-1-w" value="Back to Step" />

						<p:commandButton id="submitButton"
							action="#{registerBean.doRegister()}" icon="ui-icon-check"
							update=":growl" value="Sign Up" />
					</h:panelGrid>
				</p:fieldset>

				<!-- weicheng added for callBack backing bean method  -->
				<p:commandLink id="hiddenLink"
					actionListener="#{registerBean.upload}" update="preview,text"
					style="display:none">
				</p:commandLink>

			</h:form>


			<!-- for test -->
			<!-- <p:panel id="pl">
				<p:graphicImage id="previewx" style="width:55px;" alt=" "
					value="#{registerBean.image}" cache="false" />
			</p:panel> -->


		</div>
	</ui:define>
</ui:composition>